<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>java</title>
    <link rel="stylesheet" th:href="@{/css/myStyle.css}"/>
</head>
<body>
    <div class="n-head">
        <div class="g-doc f-cb">
            <div class="user">
                卖家你好，<span class="name">seller</span>！<a href="/logout">[退出]</a>
            </div>
            <ul class="nav">
                <li><a href="/">首页</a></li>
                <li><a href="/publish">发布</a></li>
            </ul>
        </div>
    </div>
    <div class="g-doc">
        <div class="m-tab m-tab-fw m-tab-simple f-cb">
            <div class="tab">
                <ul>
                    <li class="z-sel" ><a href="/">所有内容</a></li>
                </ul>
            </div>
        </div>
        <div class="n-plist">
            <ul class="f-cb" id="plist">
                <script>
                    (function f() {
                        var hidediv = document.createElement("div");
                        hidediv.innerHTML = "[[${commodity}]]";
                        var data = hidediv.innerText;
                        var jsondata = JSON.parse(data);
                        var arr = jsondata.array;

                        const ul = window.document.getElementById("plist");
                        let str = "";
                        for(const i in arr){
                            str += "<li>" +
                                "<a href=\"/show?id=" + arr[i].id + "\" class=\"link\">" +
                                "<div class=\"img\"><img src=\"" + arr[i].picUrl + "\" onerror=\"javascript:this.src = '/image/NoPic.png';\" alt=\"" + arr[i].summary + "\"></div>" +
                                "<h3>" + arr[i].title + "</h3>" +
                                "<div class=\"price\">" +
                                "<span class=\"v-unit\">¥</span>" +
                                "<span class=\"v-value\">" + arr[i].price + "</span>" +
                                "</div>";
                            if(arr[i].purchased === true){
                                str += "<span class=\"had\"><b>已售出</b></span>";
                            }
                            str += "</a>";
                            if(arr[i].purchased === false){
                                str += "<span class=\"u-btn u-btn-normal u-btn-xs del\" onclick='del(" + arr[i].id + ")'>删除</span>";
                            }
                            str += "</li>";
                        }
                        ul.innerHTML = str;
                    })();

                    function del(id) {
                        var loading = new Loading();
                        var layer = new Layer();
                        layer.reset({
                            content:'确定要删除该内容吗？',
                            onconfirm:function(){
                                layer.hide();
                                loading.show();

                                var xhr = new XMLHttpRequest();
                                xhr.onreadystatechange = function(){
                                    if(xhr.readyState === 4){
                                        var status = xhr.status;
                                        if(status >= 200 && status < 300 || status === 304){
                                            loading.result('删除成功',function(){location.href = "/";});
                                        }
                                    }
                                };
                                xhr.open('get','/delete?id=' + id);
                                xhr.send();
                            }.bind(this)
                        }).show();
                    }

                    //layer
                    var Layer = function(){
                        this.init();
                    }
                    Layer.prototype = {
                        init:function(){
                            this.isConfirmed = false;
                            this.template ='<div class="m-winwrapper">\
							    <div class="winwrapper">\
							        <div class="m-win m-win-simple">\
							            <div class="winhd"><h2 class="wintt">{title}</h2></div>\
							            <div class="winbd">{content}</div>\
							            <div class="winft">\
							                <button type="button" class="u-btn u-btn-primary u-btn-fw" data-action="confirm">{confirmText}</button>\
							                <button type="button" class="u-btn u-btn-normal u-btn-fw" data-action="cancel">取消</button>\
							            </div>\
							        </div>\
							    </div>\
							</div>';
                            this.body = document.createElement('div');
                            this.body.style.display = 'none';
                            document.body.appendChild(this.body);
                            this.body.addEventListener('click',function(e){
                                var ele = e.target;
                                var action = ele.dataset && ele.dataset.action;
                                if(action == 'confirm'){
                                    this.confirm();
                                    return;
                                }
                                if(action == 'cancel'){
                                    this.hide();
                                    return;
                                }
                            }.bind(this),false);
                        },
                        reset:function(options){
                            var options = options || {};
                            this.title = options.title || '提示';
                            this.content = options.content || '';
                            this.confirmText = options.confirmText || '确定';
                            this.onconfirm = options.onconfirm || f;
                            this.isConfirmed = false;
                            return this;
                        },
                        confirm:function(){
                            if(!this.isConfirmed){
                                this.onconfirm();
                            }
                            this.isConfirmed = true;
                        },
                        rend:function(){
                            var html = this.template.replace('{title}',this.title).replace('{content}',this.content).replace('{confirmText}',this.confirmText);
                            this.body.innerHTML = html;
                        },
                        show:function(){
                            this.isConfirmed = false;
                            this.rend();
                            this.body.style.display = '';
                        },
                        hide:function(){
                            this.isConfirmed = false;
                            this.body.style.display = 'none';
                        },
                    };

                    //loading
                    var Loading = function(){
                        this.init();
                    }
                    Loading.prototype = {
                        init:function(){
                            this.template ='<div class="v-load {class}"><div class="load"><i></i><b>{message}</b></div></div>';
                            this.body = document.createElement('div');
                            this.body.style.display = 'none';
                            this.timer = null;
                            document.body.appendChild(this.body);
                        },
                        rend:function(data){
                            var html = data ? this.template.replace('{class}','v-load-result').replace('{message}',data.message) : this.template;
                            this.body.innerHTML = html;
                        },
                        show:function(){
                            this.rend();
                            this.body.style.display = '';
                        },
                        result:function(message,callback){
                            if(!message){
                                return;
                            }
                            this.rend({message:message});
                            if(this.timer){
                                window.clearTimeout(this.timer);
                            }
                            this.timer = window.setTimeout(function(){
                                this.hide();
                                callback && callback();
                            }.bind(this),1500);
                        },
                        hide:function(){
                            this.body.style.display = 'none';
                        }
                    };
                </script>

            </ul>
        </div>
    </div>
    <div class="n-foot">
        <p>
            杭研有数：陈佳——在校作业
        </p>
    </div>
</body>
</html>